<template>
  <div class="table-box">
    <ProTable
      :init-param="initParam"
      ref="proTable"
      title="报损单列表"
      row-key="id"
      :indent="20"
      :columns="columns"
      :request-api="getStockOutList"
    >
      <template #tableHeader>
        <!-- v-auth="'add'" -->
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)"> 新增报损单 </el-button>
      </template>
      <template #outDate="{ row }">
        {{ row.outDate?.slice(0, 10) }}
      </template>
      <template #operation="scope">
        <!-- <el-button
          v-auth="'check'"
          v-if="!scope.row.checkFlag"
          type="primary"
          link
          :icon="FolderChecked"
          @click="onCheckRow(scope.row)"
        >
          审核
        </el-button> -->
        <!--  v-auth="'check'" -->
        <el-button v-auth="'uncheck'" v-if="scope.row.checkFlag" type="primary" link @click="unCheckRow(scope.row)">
          反审核
        </el-button>

        <!-- v-auth="'edit'" v-auth="'view'"   v-auth="'export'"-->
        <el-button
          v-auth="'edit'"
          v-if="!scope.row.checkFlag"
          type="primary"
          link
          :icon="EditPen"
          @click="toCreate(scope.row.id)"
        >
          编辑
        </el-button>
        <el-button v-auth="'view'" v-if="scope.row.checkFlag" type="primary" link :icon="View" @click="toCreate(scope.row.id)">
          查看
        </el-button>
        <el-button v-auth="'delete'" v-if="scope.row.checkFlag" type="primary" link :icon="Delete" @click="onDelete(scope.row)">
          删除
        </el-button>
        <!-- <el-button type="primary" link :icon="EditPen" @click="toExport(scope.row)"> 导出 </el-button> -->
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="breakageList">
import { Inventory } from "@/api/interface";
import { deleteStockOut, exportStockOut, getStockOutList, unCheckStockOut } from "@/api/modules/inventory";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { getLastQuarterDays } from "@/utils/date";
import { formatDate } from "@/utils/date-formatter";
import { warehouseStatus } from "@/utils/serviceDict";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
import { onBeforeUpdate, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const initParam = reactive({ orderType: 2 });

const proTable = ref<ProTableInstance>();
const router = useRouter();
const route = useRoute();
// 跳转详情页面
const toCreate = (id?: number) => {
  if (id !== 0) {
    router.push({
      path: "/stock/breakageEdit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/stock/breakageEdit`);
  }
};
const columns: ColumnProps<Inventory.ResStockOutList>[] = [
  { type: "index", label: "序号", width: 60 },
  {
    prop: "outDate",
    label: "业务日期",
    minWidth: 164,
    search: {
      el: "date-picker",
      key: "timeValue",
      order: 1,
      defaultValue: [formatDate(-getLastQuarterDays(), "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    },
    align: "left"
  },
  { prop: "orderNo", label: "单据编号", minWidth: 180, align: "left", search: { el: "input" } },
  // { prop: "trackingNo", label: "物流单号", minWidth: 200, align: "left" },
  // { prop: "LogisticsName", label: "物流公司", width: 130, align: "left" },
  // { prop: "customerName", label: "", width: 120, align: "left" },
  {
    prop: "checkFlagName",
    label: "单据状态",
    width: 110,
    align: "left",
    enum: warehouseStatus,
    isFilterEnum: false,
    search: { el: "select", key: "checkFlag" }
  },
  { prop: "houseName", label: "报损仓库", width: 110, align: "left" },
  { prop: "departmentName", label: "报损部门", width: 110, align: "left" },
  { prop: "staffName", label: "报损人", width: 110, align: "left" },
  // { prop: "customerName", label: "报损类型", width: 110, align: "left" },
  { prop: "createTime", label: "创建时间", minWidth: 164, align: "left" },
  { prop: "operation", label: "操作", width: 220, fixed: "right" }
];

const unCheckRow = async (params: Inventory.ResStockOutList) => {
  await useHandleData(unCheckStockOut, { id: params.id, orderType: 2 }, `反审核编号【${params.orderNo}】报损单`);
  proTable.value?.getTableList();
};
const onDelete = async (params: Inventory.ResStockOutList) => {
  await useHandleData(deleteStockOut, { id: params.id, orderType: 2 }, `删除编号【${params.orderNo}】报损单`);
  proTable.value?.getTableList();
};
// const onCheckRow = async (params: Inventory.ResStockOutList) => {
//   await useHandleData(checkStockOut, { id: params.id }, `审核编号【${params.orderNo}】报损单`);
//   proTable.value?.getTableList();
// };

const toExport = async (params: Inventory.ResStockOutList) => {
  await useHandleData(exportStockOut, { id: params.id, orderType: 2 }, `导出编号【${params.orderNo}】报损单`);
  proTable.value?.getTableList();
};

onBeforeUpdate(() => {
  if (route.query.upList) {
    proTable.value?.getTableList();
  }
});
</script>
